<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"  content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title></title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://at.alicdn.com/t/c/font_4516942_2xj7mn9ccfe.css" rel="stylesheet">
    <style>
        /* 可以根据需要调整左侧栏的固定宽度 */
        .sidebar {
            width: 11vw;
            position: fixed; /* 保持左侧栏固定不动 */
            top: 0;
            bottom: 0;
            left: 0;
            background-color: #f8f9fa;
            overflow-y: auto; /* 添加滚动条以应对高度超出视口的情况 */
        }

        /* 为右侧内容区域添加适当的内边距，以避免被左侧栏遮挡 */
        .content {
            margin-left: 11vw; /* 应等于左侧栏宽度加上可能的边框或内边距 */
        }

      
 
        .sidebar a {
            text-decoration: none;
            color: #fff;
            height: 60px;
            padding:10px 0 0 10px !important;
            margin:0;
        } 
        .sidebar a:hover {
            text-decoration: none;
            color: #1783E1;
            background-color: #32434C;
        }
        

        .main-table {
           color: blue;
		   table-layout: fixed !important;
		   overflow: hidden;
		   white-space: nowrap;
		   text-overflow: ellipsis; 
		   margin-top:-3.25vw;
        }

        .main-table td {
            height: 3.25vw;
            border:1px solid #ccc;
            color: blue;
            padding: 0;
            margin:0;
            vertical-align: bottom;
			
        } 
        .main-table .blue {
          background: rgba(23, 131, 255, 0.2); 
          color: blue;
        }

        .main-table .green {
          background: rgba(0, 255, 0, 0.1); 
        }

        .td-no-border {
            border: none;
            border-width:0 !important;
            border-image-width:  0;
        }

        .td-no-border td{
            border: none;
            background-color: rgba(255,0,0,0);
            height: 3.25vw;
            text-align:right;
        }



        /* 为特定td添加自定义类，方便应用倒三角形样式 */
        .triangle-text {
            position: relative;
            /* 可选：添加内边距以确保倒三角形与td内容之间有足够的空间 */
            padding-top: 2.8vh;
        }
        .triangle-text::before {
            content: "6.3";
            display: inline-block;
            text-align:right;
            vertical-align: text-top;
            position: absolute;
            top: -2.8vh; /* 调整以改变倒三角形与td顶部的距离 */
            left: 50%; /* 将倒三角形居中对齐 */
            transform: translateX(-50%); /* 实现水平居中 */
            color: #000;
        }


        /* 为特定td添加自定义类，方便应用倒三角形样式 */
        .triangle-orange {
            position: relative;
            /* 可选：添加内边距以确保倒三角形与td内容之间有足够的空间 */
            padding-top: 2.8vh;
        }
        .triangle-orange::before {
            content: "";
            display: inline-block;
            text-align:center;
            vertical-align: text-top;
            position: absolute;
            top: -1.8vh; /* 调整以改变倒三角形与td顶部的距离 */
            left: 50%; /* 将倒三角形居中对齐 */
            transform: translateX(-50%); /* 实现水平居中 */
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 1.66vh 1.66vh  0 1.66vh; /* 调整边框宽度以改变倒三角形大小 */
            border-color: #fd9c00 transparent transparent transparent; /* 黄色三角形，第一个颜色是填充色，后面三个是透明 */
            opacity: 1;
        }


        /* 为特定td添加自定义类，方便应用倒三角形样式 */
        .triangle-green {
            position: relative;
            /* 可选：添加内边距以确保倒三角形与td内容之间有足够的空间 */
            padding-top: 1.8vh;
            border: 2px solid #00d200 !important;
            transition: opacity 0.5s ease-in;
        }
        .triangle-green::before {
            content: "";
            position: absolute;
            top: -1.8vh; /* 调整以改变倒三角形与td顶部的距离 */
            left: 50%; /* 将倒三角形居中对齐 */
            transform: translateX(-50%); /* 实现水平居中 */
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 1.66vh 1.66vh  0 1.66vh; /* 调整边框宽度以改变倒三角形大小 */
            border-color: #00d200 transparent transparent transparent; /* 黄色三角形，第一个颜色是填充色，后面三个是透明 */
            opacity: 1;
        }

 
        .btn-scale-on-click {
            transition: transform 0.2s;
			padding:1.2vw 1.2vw 1.2vw 1.2vw;
        }

        .btn-scale-on-click:hover {
           background-color: #eee;
        }

        .btn-scale-on-click:focus,
        .btn-scale-on-click:active {
            transform: scale(1.1); 
            background-color: #eee;
            border-color:#0d86f6 !important;
        }

        .btn-main-ico {color: #0d86f6; font-size: 3vw;}
        .btn-main-text {text-align: left;}
        .btn-main-name {
			color: #000; 
			font-size: 1.3vw !important;
			margin-bottom:0;
			font-style: normal !important;
			font-weight: bolder;
			}
        .btn-main-remark {color: #aaa; font-size: 1vw;}
 
		/*html {font-size:12px;}*/
 	 
 		 .left-menu {
 			 padding-top:5vh;
 		 }
		.left-menu a {
			text-decoration: none;
			height: 8vh;
			display: flex;
			font-size:1.1vw !important;
			color: #fff;
			align-items: center; 
			padding-left:1vw;
		  } 
				
		.left-menu .iconfont{
			font-size:1.2vw !important;
		}
		.left-menu a:hover {
			text-decoration: none;
			color: #1783E1;
			background-color: #32434C;
		}
    </style> 
</head>
<body>

  
	<div class="container-fluid vh-100 m-0 p-0" style=" border-radius: 0 !important;">
		<div class="row vh-100 m-0 p-0" style="display: grid;grid-template-columns: 10.5% auto; ">
			<div class="m-0 p-0" style="background-color: #2A3740;"> 
				
				<div style="height:12vh;;background-color: #111F24;color: #fff;font-size: 1.5vw;display: flex;align-items: center; justify-content: center;">
					睿思通
				</div>

				<div class="left-menu">
					<!-- Menu items with icons --> 
					<a href="#" class="menu-item">
						<i class="iconfont icon-baocun-copy"></i>
						<span class="ms-2">保存</span>
					</a>
					<a href="#" class="menu-item">
						<i class="iconfont icon-weibiaoti--"></i>
						<span class="ms-2">生成报告</span>
					</a>
					<a href="#" class="menu-item">
						<i class="iconfont icon-fengxianpinggu"></i>
						<span class="ms-2">风险评估</span>
					</a>
					<a href="#" class="menu-item">
						<i class="iconfont icon-shanchu"></i>
						<span class="ms-2">删除</span>
					</a>
					<a href="#" class="menu-item">
						<i class="iconfont icon-xinjian"></i>
						<span class="ms-2">新建/查找</span>
					</a>
					<a href="#" class="menu-item">
						<i class="iconfont icon-xuanjiao"></i>
						<span class="ms-2">宣教</span>
					</a>
					<a href="#" class="menu-item">
						<i class="iconfont icon-AI"></i>
						<span class="ms-2">智能语音</span>
					</a>
					<a href="#" class="menu-item">
						<i class="iconfont icon-zhaoxiangji"></i>
						<span class="ms-2">照相</span>
					</a>
				</div>
			
			</div>
			<div class=" m-0 p-0"> 
				 
				 
				 <div class="d-flex align-items-center"  style="background-color: rgb(24,37,49);color:#fff;height:4vw; font-size:1.3vw;justify-content:space-between;padding-left: 1vw;">
                    <div>
                        <i class="iconfont icon-user" style="font-size: 1.5vw;"></i>  李先生 | 男 | 28岁 | 2024042101 | 历史记录
                    </div>

                    <div class="dropdown" style="height:4vw;">
                        <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" style="font-size: 1.2vw;">
                            李医生
                        </button>
                        <ul class="dropdown-menu">
                          <li><a class="dropdown-item" href="#">李医生</a></li>
                          <li><a class="dropdown-item" href="#">王医生</a></li>
                          <li><a class="dropdown-item" href="#">张医生</a></li>
                        </ul>
                    </div>
                </div>
 
              
				<div style="padding:5vh 3vw 1vh 3vw">
                    <div class="border d-flex" style="background-image:url('./img/main.png');border-bottom: none !important; width:84vw;height:28vw; background-size:100% 100%;display: flex;
                    flex-direction: column;">
                        <table class="table table-bordered border-primary main-table"  id="main_table"> 
                            
                        </table>
                    </div>
                </div>
 
                <div style="padding:3vh 3vw 0 3vw " >
                    <div class="d-flex justify-content-around p-0 m-0">
                        <button type="button" class="btn btn-lg btn-outline-secondary border shadow-sm btn-scale-on-click d-flex align-items-center">
                            <div class="flex-shrink-0 me-2">
                                <i class="iconfont icon-yachixiufu1 btn-main-ico"></i>
                            </div>
                            <div class="flex-grow-1 btn-main-text"  >
                                <div class="fst-italic fs-6 btn-main-name">牙列检测</div> 
                                <div class="fs-7 btn-main-remark">标记牙列状态</div>
                            </div>
                        </button>

                        <button type="button" class="btn btn-lg btn-outline-secondary border shadow-sm btn-scale-on-click d-flex align-items-center">
                            <div class="flex-shrink-0 me-2">
                                <i class="iconfont icon-lashenyachi-xuanzhong btn-main-ico"></i>
                            </div>
							<div class="flex-grow-1 btn-main-text"  >
							    <div class="fst-italic fs-6 btn-main-name">测量</div> 
							    <div class="fs-7 btn-main-remark">测量牙周袋深度</div>
							</div>
                        </button>
						
						<button type="button" class="btn btn-lg btn-outline-secondary border shadow-sm btn-scale-on-click d-flex align-items-center">
						    <div class="flex-shrink-0 me-2">
						          <i class="iconfont icon-shoushuchuxieliang btn-main-ico"></i>
						    </div>
							<div class="flex-grow-1 btn-main-text"  >
							    <div class="fst-italic fs-6 btn-main-name">出血</div> 
							    <div class="fs-7 btn-main-remark">标记牙出血</div>
							</div>
						</button>
						
						<button type="button" class="btn btn-lg btn-outline-secondary border shadow-sm btn-scale-on-click d-flex align-items-center">
						    <div class="flex-shrink-0 me-2">
						          <i class="iconfont icon-yachichuxie btn-main-ico"></i>
						    </div>
							<div class="flex-grow-1 btn-main-text"  >
							    <div class="fst-italic fs-6 btn-main-name">溢脓</div> 
							    <div class="fs-7 btn-main-remark">标记牙溢脓</div>
							</div>
						</button>
						
						<button type="button" class="btn btn-lg btn-outline-secondary border shadow-sm btn-scale-on-click d-flex align-items-center">
						    <div class="flex-shrink-0 me-2">
						             <i class="iconfont icon-yachisongdong btn-main-ico"></i>
						    </div>
							<div class="flex-grow-1 btn-main-text"  >
							    <div class="fst-italic fs-6 btn-main-name">松动度</div> 
							    <div class="fs-7 btn-main-remark">标记牙松动度</div>
							</div>
						</button>
						
						<button type="button" class="btn btn-lg btn-outline-secondary border shadow-sm btn-scale-on-click d-flex align-items-center">
						    <div class="flex-shrink-0 me-2">
						            <i class="iconfont icon-yachixiufu btn-main-ico"></i>
						    </div>
							<div class="flex-grow-1 btn-main-text"  >
							    <div class="fst-italic fs-6 btn-main-name">根分叉</div> 
							    <div class="fs-7 btn-main-remark">标记牙根分叉</div>
							</div>
						</button> 
                    </div>
                </div>
  
                <div>
                    <div  style="margin:1vh 1vw 0 3vw;"> 
                        <button type="button" class="btn btn-primary" id="btn_set" style="font-size: 1.5vw;">设置牙周深度（演示随机）</button>
                        <button type="button" class="btn btn-primary" id="btn_set2" style="font-size: 1.5vw;">设置退縮/增生（演示随机）</button>
                        <button type="button" class="btn btn-primary" id="btn_next" style="font-size: 1.5vw;">下一个</button>
                        <span style="text-align: right; font-size: 1.2vw;color:#888;float: right;">睿思通提供技术支持</span>
                    </div>
                </div>
				 
				 
			</div>
		</div>
	</div>
 
    <script> 
      
	     document.addEventListener('plusready', function(){
			//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。")
			
		  });
		  
        var roadPath = 1;
        var g_position = 0;
        var g_positionChild = 0;
        var g_checkPositionLast = "";
        var g_setPositon = 0;
        var g_setPositonChild = 0;
  
        initPoint6();

        document.getElementById("btn_set").addEventListener('click',function(){
            var dom = document.getElementById("btn_" + g_position + "_" + g_positionChild);
            if(g_setPositon !== 0) {
                document.getElementById("btn_" + g_setPositon + "_" + g_setPositonChild).classList.remove('triangle-orange');
            }
            var num1 = Math.floor(Math.random() * 10) + 1;
            var num2 = Math.floor(Math.random() * 10) + 1;
            var html =  '<div style="text-align: center; font-size: 1vw;overflow:hidden; text-overflow: ellipsis;"><div>' + num1 +
					'</div><div style="text-align: right; font-size: 0.7vw;">.' + num2 + '</div></div>';
            dom.innerHTML = "";
            dom.insertAdjacentHTML("beforeend",html);
            dom.classList.add('triangle-orange'); 
            g_setPositon = g_position;
            g_setPositonChild = g_positionChild;
		},false);


        document.getElementById("btn_set2").addEventListener('click',function(){ 
            var dom = document.getElementById("btn_" + g_position + "_" + g_positionChild );
            var dom2 = document.getElementById("btn_" + g_position + "_" + g_positionChild + "_top");
            if(g_setPositon !== 0) {
                document.getElementById("btn_" + g_setPositon + "_" + g_setPositonChild).classList.remove('triangle-orange');
            }
            var num1 = Math.floor(Math.random() * 10) + 1;
            var num2 = Math.floor(Math.random() * 10) + 1;
            var html =  '<div style="overflow:hidden; text-overflow: ellipsis;"><div style="font-size:1vw;text-align:center;">' + num1 +
					'</div><div style="font-size: 0.7vw;">.' + num2 + '</div><div>';
            dom2.innerHTML = "";
            dom2.insertAdjacentHTML("beforeend",html);
            dom.classList.add('triangle-orange'); 
            g_setPositon = g_position;
            g_setPositonChild = g_positionChild;

		},false);


        document.getElementById("btn_next").addEventListener('click',function(){
			
            if(g_position === 0) {
                g_position =  18;
                g_positionChild =  1;
                g_checkPositionLast = "btn_18_1";
                document.getElementById("btn_" + g_position + "_" + g_positionChild).classList.add('triangle-green');
                return;
            } 

            document.getElementById("btn_" + g_position + "_" + g_positionChild).classList.remove('triangle-green');
            var id = getNext(1,g_position,g_positionChild); 
            document.getElementById("btn_" + id).classList.add('triangle-green');

		},false);


        function getNext(path,position,child) { 
            
            if(path === 1) { 
                if(child === 1 || child === 2) {
                    g_positionChild++;
                    return position + "_" + (++child);
                }

                g_positionChild = 1; 
                if((position <= 18 && position > 11)  ||  (position <= 48 && position > 41)) {  
                    --g_position;
                    return (--position) + "_1";
                } 
                if((position >= 21 && position < 28) || (position >= 31 && position < 38) ) { 
                    ++g_position;
                    return (++position) + "_1";
                }
                if(position === 11 ) { 
                    g_position = 21;
                    return "21_1";
                }
                if(position === 28 ) { 
                    g_position = 48;
                    return "48_1";
                }
                if(position === 41 ) { 
                    g_position = 31;
                    return "31_1";
                } 
                if(position === 38 ) { 
                    g_position = 18;
                    return "18_1";
                } 
            }


        }


        function point6Click(){ 

            var table = document.getElementById('main_table');
             
            for (var i = 0; i < table.rows.length; i++) {
                var row = table.rows[i]; 
                if(i === 1 || i === 2 || i === 5 || i === 6) {
                   
                    for (var j = 0; j < row.cells.length; j++) {
                    var cell = row.cells[j]; 
                    cell.addEventListener('click', function(event) {
                        if(g_position !== 0) {
                            document.getElementById("btn_" + g_position + "_" + g_positionChild).classList.remove('triangle-green');
                        }
                        var clickedCell = event.target;
                        var cellId = clickedCell.id;
                        var array = cellId.split("_");  
                        g_position = array[1];
                        g_positionChild = array[2]; 
                        clickedCell.classList.add('triangle-green');
                        
                    });
                }

                }

            }
 

        }

        function initPoint6(){
            var html = '<tr class="td-no-border">';
            for(i = 18;i >= 11; i--) {
                html = html + '<td id="btn_' + i + '_1_top"></td><td id="btn_' + i  + '_2_top"></td><td id="btn_'  + i + '_3_top"></td>'; 
            }
            for(i = 21;i<= 28 ; i++) {
                html = html + '<td id="btn_' + i + '_1_top"></td><td id="btn_' + i  + '_2_top"></td><td id="btn_'  + i + '_3_top"></td>'; 
            }

            html = html + "</tr><tr>"
            for(i = 18;i >= 11 ; i--) {
                if(i % 2 == 0) {
                    html = html + '<td class="blue" id="btn_' + i + '_1"></td><td class="blue" id="btn_' + i  + '_2"></td><td class="blue" id="btn_'  + i + '_3"></td>'; 
                } else {
                    html = html + '<td class="green" id="btn_' + i + '_1"></td><td class="green" id="btn_' + i + '_2"></td><td class="green" id="btn_'  + i + '_3"></td>'; 
                }
            }
            for(i = 21;i<= 28 ; i++) {
                if(i % 2 == 0) {
                    html = html + '<td class="blue" id="btn_' + i + '_1"></td><td class="blue" id="btn_' + i + '_2"></td><td class="blue" id="btn_'  + i + '_3"></td>'; 
                } else {
                    html = html + '<td class="green" id="btn_' + i + '_1"></td><td class="green" id="btn_' + i  + '_2"></td><td class="green" id="btn_'  + i + '_3"></td>'; 
                }
            }
            html = html + "</tr><tr>"
            for(i = 18;i>= 11 ; i--) {
                if(i % 2 == 0) {
                    html = html + '<td class="blue" id="btn_' + i + '_4"></td><td class="blue" id="btn_' + i + '_5"></td><td class="blue" id="btn_'  + i + '_6"></td>'; 
                } else {
                    html = html + '<td class="green" id="btn_' + i + '_4"></td><td class="green" id="btn_' + i + '_5"></td><td class="green" id="btn_'  + i + '_6"></td>'; 
                }
            }
            for(i = 21;i<= 28 ; i++) {
                if(i % 2 == 0) {
                    html = html + '<td class="blue" id="btn_' + i + '_4"></td><td class="blue" id="btn_' + i + '_5"></td><td class="blue" id="btn_'  + i + '_6"></td>'; 
                } else {
                    html = html + '<td class="green" id="btn_' + i + '_4"></td><td class="green" id="btn_' + i + '_5"></td><td class="green" id="btn_'  + i + '_6"></td>'; 
                }
            }
            html = html + '</tr><tr style="height:13vw;border:none;"></tr><tr class="td-no-border">';


            for(i = 48;i >= 41; i--) {
                html = html + '<td id="btn_' + i + '_1_top"></td><td id="btn_' + i  + '_2_top"></td><td id="btn_'  + i + '_3_top"></td>'; 
            }
            for(i = 31;i <= 38; i++) {
                html = html + '<td id="btn_' + i + '_1_top"></td><td id="btn_' + i  + '_2_top"></td><td id="btn_'  + i + '_3_top"></td>'; 
            }

            html = html + '</tr><tr>';

            for(i = 48;i >= 41 ; i--) {
                if(i % 2 == 0) {
                    html = html + '<td class="blue" id="btn_' + i + '_1"></td><td class="blue" id="btn_' + i + '_2"></td><td class="blue" id="btn_'  + i + '_3"></td>'; 
                } else { 
                    html = html + '<td class="green" id="btn_' + i + '_1"></td><td class="green" id="btn_' + i + '_2"></td><td class="green" id="btn_'  + i + '_3"></td>'; 
                }
            }
            for(i = 31;i<= 38 ; i++) {
                if(i % 2 == 0) {
                    html = html + '<td class="blue" id="btn_' + i + '_1"></td><td class="blue" id="btn_' + i + '_2"></td><td class="blue" id="btn_'  + i + '_3"></td>'; 
                } else {
                    html = html + '<td class="green" id="btn_' + i + '_1"></td><td class="green" id="btn_' + i + '_2"></td><td class="green" id="btn_'  + i + '_3"></td>'; 
                }
            }
            html =    html + "</tr><tr>"
            for(i = 48;i>= 41 ; i--) {
                if(i % 2 == 0) {
                    html = html + '<td class="blue" id="btn_' + i + '_4"></td><td class="blue" id="btn_' + i + '_5"></td><td class="blue" id="btn_'  + i + '_6"></td>'; 
                } else {
                    html = html + '<td class="green" id="btn_' + i + '_4"></td><td class="green" id="btn_' + i + '_5"></td><td class="green" id="btn_'  + i + '_6"></td>'; 
                }
            }
            for(i = 31;i<= 38 ; i++) {
                if(i % 2 == 0) {
                    html = html + '<td class="blue" id="btn_' + i + '_4"></td><td class="blue" id="btn_' + i + '_5"></td><td class="blue" id="btn_'  + i + '_6"></td>'; 
                } else {
                    html = html + '<td class="green" id="btn_' + i + '_4"></td><td class="green" id="btn_' + i + '_5"></td><td class="green" id="btn_'  + i + '_6"></td>'; 
                }
            }
            html =  html + "</tr>"
            var main_table = document.getElementById("main_table");
            main_table.innerHTML = "";
            main_table.insertAdjacentHTML("beforeend",html);
            point6Click();

        }


       
    </script>
 
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/art-template/4.13.2/lib/template-web.min.js"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/js/bootstrap.min.js"></script>
</body>
</html>
